{extend name="public/base"}
{block name="body"}
{include file="public/colnav"}
<div class="container">
	<ol class="breadcrumb">
	  <li><a href="#">商城首页</a></li>
	  <li>购物车页面</li>
	</ol>
	<form action="{:url('/account')}" method="post">
  		<div class="form-group cart-form">
			<table class="table">
				<colgroup>
					<col style="width: 10%;">
					<col style="width: 40%;">
					<col style="width: 25%;">
					<col style="width: 10%;">
					<col style="width: 10%;">
					<col style="width: 10%;">
				</colgroup>
				<tr class="active">
					<th>
						<label class="checkbox-inline">
						  <input type="checkbox" class="allchecked" value="全选"> 全选
						</label>
					</th>
					<th colspan="2">商品</th>
					<th>单价</th>
					<th>数量</th>
					<th>小计</th>
				</tr>
				<tr>
					<td>
						<div class="checkbox">
						  <label>
						    <input type="checkbox" class="childrensCheckbox" value="option1" aria-label="">
						  </label>
						</div>
					</td>
					<td>
						<div class="media">
						  <div class="media-left">
						    <a href="#">
						      <img class="media-object" src="static/images/m01.jpg" alt="商品的简介" width="80px" height="80px">
						    </a>
						  </div>
						  <div class="media-body">
						    <div class="media-heading">OPPO R11 全网通4G+64G 双卡双待手机 玫瑰金色</div>
						    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>支持7天无理由退货
						  </div>
						</div>
					</td>
					<td>
						<p>颜色：玫瑰金色</p>
						<p>尺码：全网通</p>
					</td>
					<td class="cost">
						<em>¥</em><strong id="Oneprice-1">2999.00</strong>
					</td>
					<td>
						<div class="cart-quantity-form" promoid="201885342">
							<a href="javascript:void(0);" class="decrement disabled" id="decrement">-</a>
							<input autocomplete="off" type="text" class="itxt form-control input-sm" value="1" name="shopNum" id="shopNum" minnum="1">
							<a href="javascript:void(0);" class="increment" id="increment">+</a>
						</div>
					</td>
					<td class="cost">
						<em>¥</em><strong id="tot-1">2999.00</strong>
					</td>
				</tr>
				<tr>
					<td>
						<div class="checkbox">
						  <label>
						    <input type="checkbox" class="childrensCheckbox" value="option1" aria-label="">
						  </label>
						</div>
					</td>
					<td>
						<div class="media">
						  <div class="media-left">
						    <a href="#">
						      <img class="media-object" src="static/images/m01.jpg" alt="商品的简介" width="80px" height="80px">
						    </a>
						  </div>
						  <div class="media-body">
						    <div class="media-heading">OPPO R11 全网通4G+64G 双卡双待手机 玫瑰金色</div>
						    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>支持7天无理由退货
						  </div>
						</div>
					</td>
					<td>
						<p>颜色：玫瑰金色</p>
						<p>尺码：全网通</p>
					</td>
					<td class="cost">
						<em>¥</em><strong id="Oneprice-1">2999.00</strong>
					</td>
					<td>
						<div class="cart-quantity-form" promoid="201885342">
							<a href="javascript:void(0);" class="decrement disabled" id="decrement">-</a>
							<input autocomplete="off" type="text" class="itxt form-control input-sm" value="1" id="shopNum-1" minnum="1">
							<a href="javascript:void(0);" class="increment" id="increment">+</a>
						</div>
					</td>
					<td class="cost">
						<em>¥</em><strong id="tot-1" class="tot">2999.00</strong>
					</td>
				</tr>
				<tr>
					<td>
						<label class="checkbox-inline">
						  <input type="checkbox" class="allchecked" value="全选"> 全选
						</label>
					</td>
					<td>
						<a href="javascript:" class="btn btn-danger btn-xs">删除选中的商品</a>
					</td>
					<td>
						已经选中了<span id="goodsSelectNum">0</span>商品
					</td>
					<td>
						<span class="price-inline">总价:<em>¥</em><strong id="tot-price"></strong></span>
					</td>
					<td colspan="2" class="text-center">
						<a href="javascript:" onclick="formsub()" class="btn btn-danger">去结算</a>
					</td>
				</tr>
			</table>
		</div>
	</form>
</div>
{/block}
{block name="jsRes"}
<script>
	$('#decrement').on('click',function(event) {
		var buyNum=parseInt($('#shopNum').val());
		if(buyNum>1){
			var buyNum=buyNum-1;
			$('#shopNum').val(buyNum);
		}else {
			alert('必须要选择一个');
		}
		$('#tot-1').html($('#Oneprice-1').html()*buyNum+'.00');
	});
	//监听价格的变化
	$('#shopNum').on('input propertychange change',function(){
		var number=this.value;
		$('#tot-1').html($('#Oneprice-1').html()*number+'.00');
	});
	$('#increment').on('click',function(event){
		var buyNum=parseInt($('#shopNum').val())+1;			
		$('#shopNum').val(buyNum);
		$('#tot-1').html($('#Oneprice-1').html()*buyNum+'.00');
	});
	$('.checkbox').on('click',function(event) {
		if($(this).find('input').is(':checked')){
			$(this).parents('tr').addClass('warning');			
		}else{
			$(this).parents('tr').removeClass('warning');
		}
		var nums=$('.childrensCheckbox:checked').length;
		$('#goodsSelectNum').html(nums);
	});
	$('.allchecked').click(function(event) {
		$('.childrensCheckbox').click();		
	});
	//监听数值变化
	$('#tot-1').on('DOMNodeInserted',function(){
		$('#tot-price').html($('#tot-1').html());
	});
	$('#tot-price').html($('#tot-1').html());
	function formsub(){
		alert(1);
		$('form').submit();
	}
</script>
{/block}